<template>
  <div id="app">
    <div class="head">
      <div class="head_k">
        <div class="header-left">
          <img src="../../assets/image/logo.png" alt />
        </div>
        <div class="header-right">
          <div class="header-right-top">
            <div class="lang">
              <p @click="changeChina()">中文</p>
              <span></span>
              <p>English</p>
            </div>
          </div>

          <ul class="header-right-bottom">
            <li class="activeli">
              <span @click="tohome">Home</span>
            </li>
            <li class="activeli">
              <span @click="toabout" :style="border2">About us</span>
            </li>

            <li class="activeli">
              <span @click="toexhibition" :style="border3">Exhibition</span>
            </li>

            <li class="activeli">
              <span @click="tocollection" :style="border">Collection</span>
            </li>
            <li class="activeli">
              <span @click="toguide" :style="border5">Guide</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "App",

  data() {
    return {
      choose: 1,
      nav_show: false,
      border: {
        borderBottom: ""
      },
      border2: {
        borderBottom: ""
      },
      border3: {
        borderBottom: ""
      },
      border5: {
        borderBottom: ""
      },
      border6: {
        borderBottom: ""
      },
      border7: {
        borderBottom: ""
      },
      border8: {
        borderBottom: ""
      }
    };
  },
  mounted() {
    this.nav_Hide();
  },
  methods: {
    ...mapActions(["nav_Show", "nav_Hide"]),
    tohome(i) {
      this.$router.push(`/enApp/Home`).catch(err => {
        err;
      });
    },
    toabout(i) {
      this.$router.push(`/enApp/About`).catch(err => {
        err;
      });
    },
    toexhibition(i) {
      this.$router.push(`/enApp/Exhibition`).catch(err => {
        err;
      });
    },
    tocollection(i) {
      this.$router.push(`/enApp/Collection`).catch(err => {
        err;
      });
    },
    toguide(i) {
      this.$router.push(`/enApp/Guide`).catch(err => {
        err;
      });
    },
    changeChina() {
      this.nav_Show();

      // this.$emit("toChina", this.nav_show);
      this.$router.push(`/`).catch(err => {
        err;
      });
    }
  }
};
</script>
<style scoped>
.activeli:hover span {
  border-bottom: 2px solid rgb(0, 54, 203);
}
#app {
  position: relative;
}
a {
  text-decoration: none;
  color: #999999;
}
.login a {
  color: #cbcbcb;
}
.atag {
  color: rgb(153, 153, 153);
  width: 60px;
  text-align: center;
  height: 32px;
  text-decoration: none;
  display: inline-block;
}
p,
ul,
li {
  margin: 0px;
  padding: 0px;
  cursor: pointer;
}
#app {
  position: relative;
}
.head {
  width: 100%;
}
.head_k {
  display: flex;
  width: 1175px;
  margin: auto;
  padding-top: 20px;
  height: 100px;
  justify-content: space-between;
  box-sizing: border-box;
}
.header-left {
  width: 400px;
}
.header-right {
  display: flex;
  flex-direction: column;
}

.header-right-bottom {
  display: flex;
}
.header-right-bottom li span {
  display: block;
  width: 95px;
  text-align: center;
  height: 30px;
  /* border-bottom: 3px solid red; */
}
.header-right-top {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  justify-content: flex-end;
  padding-right: 12px;
  box-sizing: border-box;
}
.header-right-top {
  font-size: 16px;
}

.lang {
  display: flex;
}
.lang span {
  width: 2px;
  height: 16px;
  background: rgb(203, 203, 203);
  display: inline-block;
  margin: 2px 12px;
}

.lang > p {
  margin: 0px;
  color: rgb(203, 203, 203);
}
.header-right-bottom li {
  list-style: none;
  color: rgb(153, 153, 153);
  width: 90px;
  display: flex;
  justify-content: flex-end;
  height: 50px;
  z-index: 99;
  cursor: pointer;
  margin-left: 20px;
  border: 1px solid rgba(200, 200, 200, 0.01);
}

.activeli:hover .help {
  border-bottom: 3px solid rgb(0, 54, 103);
  display: block;
}
.help {
  display: none;
}
/* =========== */
</style>
